<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-table :data="pageInfo.list" style="width: 100%">
                    <el-table-column prop="rid" label="ID" width="65px" />
                    <el-table-column prop="owner.oname" label="业主姓名" width="90px" />
                    <el-table-column prop="rtask" label="报修内容" width="100px" />
                    <el-table-column prop="rlocation" label="报修地点" width="180px" />
                    <el-table-column prop="rtime" label="报修时间" width="115px" />
                    <el-table-column prop="personnels[0].pname" label="维修人员" width="100px" />
                    <el-table-column prop="rcompleted" label="维修状态" width="95px">
                        <template #default="scope">
                            <el-tag type="primary" v-if="scope.row.rcompleted == 0">未完成</el-tag>
                            <el-tag type="info" v-else>已完成</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-popconfirm title="报修已完成?" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="deleteByRid(scope.row.rid)">
                                <template #reference>
                                    <el-button size="small" type="danger">已完成</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="row-bg" justify="center" style="margin-top:20px ;">
                    <el-pagination background layout="prev, pager, next" :total="pageInfo.total"
                        :page-size="pageInfo.pageSize" @change="selectByPageByPid" />
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
import loginApi from '@/api/loginApi';
import repairApi from '@/api/repairApi';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'
//用于搜索姓名关键字
const pid = ref('');
//用于分页
const pageInfo = ref({
    total: 0,
    pageSize: 0,
});
//用于部门列表
//用于添加报修任务对话框
function selectByPageByPid(pageNum) {
    loginApi.select().then(resp => {
        pid.value = resp.data.pid
    })
    repairApi.selectByPageByPid(pageNum, pid.value)
        .then(resp => {
            console.log(resp.data.list[1]);
            pageInfo.value = resp.data;
        });
}
//删除
function deleteByRid(rid) {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    repairApi.delete(rid)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                selectByPageByPid(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
//默认查询首页
selectByPageByPid(1)
</script>

<style scoped></style>